<template>
    <view>

        <view class="title">配送至</view>
        <view class="shipment">
            <view class="item" v-for="item in addressList" :key="item.id">
                <view class="user">{{ item.receiver }} {{ item.contact }}</view>
                <view class="address">{{ item.fullLocation }}{{ item.address }}</view>
                <text class="icon icon-checked"></text>
            </view>

        </view>
        <view class="footer">
            <view class="button primary"> 新建地址 </view>
            <view v-if="false" class="button primary">确定</view>
        </view>
    </view>
</template>
<script>
import { getMemberAddress } from '@/api/address'
export default {
    data() {
        return {
            addressList: []
        }
    },
    async created() {
        const res = await getMemberAddress()
        // console.log(res);
        this.addressList = res.result
    }
}
</script>
<style>
.shipment {
    min-height: 300rpx;
    max-height: 540rpx;
    overflow: auto;
    padding: 20rpx 10rpx !important;
}

.shipment .item {
    padding: 30rpx 50rpx 30rpx 60rpx;
    background-size: 40rpx;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url(https://static.botue.com/erabbit/static/images/locate.png);
    position: relative;
}

.shipment .item .icon {
    color: #999;
    font-size: 40rpx;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 0;
}

.shipment .item .icon-checked {
    color: #27ba9b;
}

.shipment .item .icon-ring {
    color: #444;
}

.shipment .item .user {
    font-size: 28rpx;
    color: #444;
    font-weight: 500;
}

.shipment .item .address {
    font-size: 26rpx;
    color: #666;
}
</style>
